<template>
	<!-- 54是搜索框整体高度  52是tab的整体高度  不展示搜索框时需去除54-->
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
		<!-- 头部 -->
		<u-navbar title="酒店民宿订单" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#333333" :titleStyle="titleStyle"
			@leftClick="returnBack"></u-navbar>

		<TopTabs :list="list" @changeTab="changeTab" :top="mt" :placeholder="'输入酒店名称/订单号'" @sousuo="sousuo"></TopTabs>

		<view class="list">
			<view v-for="(item,index) in orderList" :key="index" cc v-if="FormData.orderStatus==item.orderStatus"
				@click.stop="orderDeatils(item)">
				<view class="item">
					<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
					<text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
					<text class="status s2" v-if="item.orderStatus=='-2'">待支付</text>
					<text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
					<text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
					<text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>

					<view class="head">
						<!-- <image src="@/static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
						<!-- <image src="@/static/scenicSpots/ticketIcon.png" v-else></image> -->
						<image src="@/static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
						<image src="@/static/my/jd_ms.png" mode="" v-else></image>
						<text>酒店民宿</text>
					</view>

					<view class="mid">
						<view class="name" :class="item.orderStatus=='-3'?'disabled':''">{{item.homestayName}}</view>
						<view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
						<view class="des">{{item.houseBaseName}}</view>
					</view>
					<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>

					<view class="btns">

						<template v-if="item.orderStatus==1">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<!-- 	<view @click.stop="GoRefund(item)">
								申请退订
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

						<template v-if="item.orderStatus==-2">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<view @click.stop="GoToPay(item)" style="color: #007A69;">
								去支付
							</view>
						</template>


						<template v-if="item.orderStatus==3||item.orderStatus==2">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="toEvaluate(item)">
								评价
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==5||item.orderStatus==4">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==-1">
							<view @click.stop="GoRefund(item)">
								取消
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

					</view>
				</view>

			</view>
			<view v-else @click.stop="orderDeatils(item)">
				<view class="item">
					<text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
					<text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
					<text class="status s2" v-if="item.orderStatus=='-2'">待支付</text>
					<text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
					<text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
					<text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>

					<view class="head">
						<!-- <image src="@/static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
						<!-- <image src="@/static/scenicSpots/ticketIcon.png" v-else></image> -->
						<image src="@/static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
						<image src="@/static/my/jd_ms.png" mode="" v-else></image>
						<text>酒店民宿</text>
					</view>

					<view class="mid">
						<view class="name" :class="item.orderStatus=='0'?'disabled':''">{{item.homestayName}}</view>
						<view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
						<view class="des">{{item.houseBaseName}}</view>
					</view>
					<view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>

					<view class="btns">

						<template v-if="item.orderStatus==1">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<!-- 	<view @click.stop="GoRefund(item)">
								申请退订
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

						<template v-if="item.orderStatus==-2">
							<view @click.stop="toStatus0(item)">
								取消
							</view>
							<view @click.stop="GoToPay(item)" style="color: #007A69;">
								去支付
							</view>
						</template>
						<template v-if="item.orderStatus==3||item.orderStatus==2">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="toEvaluate(item)">
								评价
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==5||item.orderStatus==4">
							<!-- 	<view @click.stop="applyAfterSales(item)">
								删除
							</view> -->
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>
						<template v-if="item.orderStatus==-1">
							<view @click.stop="GoRefund(item)">
								取消
							</view>
							<view @click.stop="applyAfterSales(item)">
								再次预订
							</view>
						</template>

					</view>
				</view>
				<!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
			</view>
		</view>
		<!-- <view class="tip"> -->
		<!-- {{orderList.length>0?'已显示全部订单':'暂无订单'}} -->
		<nodata v-if="orderList.length === 0"></nodata>
		<!-- </view> -->
		<!-- 取消弹框 -->
		<u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
			confirmColor='#0cbffd' @confirm="confirm" @cancel='cancel'></u-modal>


		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	import TopTabs from '@/compoments/TopTabs/topTabs.vue';
	export default {
		components: {
			TopTabs,
			nodata
		},
		data() {
			return {
				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				list: [{
					name: '全部'
				}, {
					name: '待支付'
				}, {
					name: '待使用'
				}, {
					name: '退款'
				}],
				mysearch: '',
				current: 0,
				orderList: [],
				orderStatus: 0,
				FormData: {
					openId: '',
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					orderStatus: '',
				},
				form: {
					initiator: 2,
					orderCode: '',
					orderStatus: ''
				},
				pageIndex: 1,
				pageCount: 10,
				isOver: false,
				ocfg: this.$ocfg,
				// orderState: ''
				title: '温馨提示',
				content: '您确定要取消吗？确定取消将不可撤回，再次预订可能因为没有房间，影响后续行程！',
				showAgree: false
			}
		},
		// onLoad() {
		// 	this.FormData.openId = JSON.parse(uni.getStorageSync('userInfo')).openId
		// 	this.getList()
		// },
		onLoad() {
			this.FormData.openId = JSON.parse(uni.getStorageSync('userInfo')).openId
			this.getList();
			setInterval(() => {
				this.init();
			}, 5 * 60 * 1000)
		},
		onReachBottom() {
			// this.FormData.page++
			this.getList();
		},

		methods: {
			// 评价
			appraise(item) {
				let obj = {
					guideId: item.id,
					orderCode: item.orderCode,
					sourceType: 2,
				}
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj),
				});
			},

			// 再次预定
			applyAfterSales(item) {
				// 初始化
				let arriveDate = new Date().Format('yyyy-MM-dd')
				let mt = new Date().setDate(new Date().getDate() + 1);
				let leaveDate = new Date(mt).Format('yyyy-MM-dd')


				uni.navigateTo({
					url: "/pagesTrip/hotel/details/index?list=" +
						JSON.stringify([{
							homestayId: item.homestayId,
							name: '',
							arriveDate: arriveDate, //	到达时间(yyyy-MM-dd)
							leaveDate: leaveDate, //离开时间(yyyy-MM-dd)
						}, ]),
				});

				// this.$refs.uToast.show({
				// 	type: 'success',
				// 	title: '',
				// 	message: "正在开发",
				// 	iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				// })
			},
			// 退款
			GoRefund(item) {
				// uni.redirectTo({
				// 	url: '/pagesTrip/hotel/refund/index?orderId=' + item.id
				// })
				uni.redirectTo({
					url: '/pagesTrip/hotel/refund/index?list=' + JSON.stringify([{
						...item
					}])
				})
			},
			// 去支付
			GoToPay(item) {
				uni.redirectTo({
					url: '/pagesTrip/hotel/orderDetails/index?orderId=' + item.id
				})
			},

			// 取消订单
			toStatus0(item) {
				this.form.orderCode = item.orderCode
				this.form.orderStatus = item.orderStatus
				this.showAgree = true
				this.getList()

			},
			//确定
			confirm() {
				this.agree = true
				this.showAgree = false

				this.$api.post('/api/hotel/cancelOrder', this.form).then(res => {
					this.getList()
				})
			},
			// 取消
			cancel() {
				this.showAgree = false
			},


			init() {
				this.FormData.page = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			changeTab(index) {
				if (index === 0) this.FormData.orderStatus = '';
				else if (index === 1) this.FormData.orderStatus = '-2'
				else if (index === 2) this.FormData.orderStatus = '1';
				else if (index === 3) this.FormData.orderStatus = '5';
				// else this.FormData.status = '0,1,-1,2,-2,-3,3,4,5,6,7,8,9,10,11';
				this.init();
			},
			orderDeatils(item) {
				uni.navigateTo({
					url: '/pagesTrip/hotel/orderDetails/index?orderId=' + item.id
				})
			},
			click(e) {

				// this.orderList.forEach(item => {
				// 	this.status = item.status;
				// })
				// this.status = e.index;
			},

			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
			returnBack() {
				uni.reLaunch({
					url: '/pages/my/index'
				})
			},
			sousuo(keyword) {
				this.mysearch = keyword;
				this.FormData.page = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},

			getList() {
				// let this = this;
				this.$api.get('/api/hotel/getCenterOrderPage', {
					openId: this.FormData.openId,
					orderStatus: this.FormData.orderStatus,
					page: this.FormData.page,
					limit: this.FormData.limit,
					searchBox: this.mysearch,
				}, true, true).then(res => {
					if (res.data.code === 0) {
						this.FormData.page++;
						let {
							list,
							total
						} = res.data.data;
						// if (this.orderList.length + list.length > total || list.length == 0) return this.isOver =
						// 	true;
						this.orderList = [...this.orderList, ...list];
						// this.orderList.forEach((d, i) => {
						// 	d.qpNum = d.detailDTOList.filter(f => f.priceType == 1).length;
						// 	d.etpNum = d.detailDTOList.filter(f => f.priceType == 2).length;
						// 	d.kcTime = new Date(d.sailDate).Format('yyyy年MM月dd日') + ' ' + d.sailTime
						// })
					} else this.$showModal(res.data.msg);
				})
			},
			toEvaluate(item) {
				item.guideId = item.id;
				item.sourceType = 2;
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(item)
				})
			}
		}
	}
</script>

<style lang="less">
	.orderList {
		box-sizing: border-box;
		background-color: #fff;

		.u-tabs__wrapper__nav__line {
			// left: 20rpx !important
		}
	}

	.u-button {
		height: 60rpx !important;
	}

	.tip {
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 33rpx;
		margin: 56rpx 0;
	}
</style>
<style lang="scss">
	page {
		background-color: #F5F8FA;
	}

	.disabled {
		color: #AAA !important
	}

	.list {
		padding: 0 24rpx;

		.item {
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 16rpx;
			padding: 36rpx 24rpx 0;
			position: relative;

			.status {
				right: 24rpx;
				top: 40rpx;
				font-size: 26rpx;
				color: #AAA;
				position: absolute;

				&.s2 {
					color: #FF7D01;
				}

				&.s3 {
					color: #01B9F9
				}
			}

			.head {
				color: #111;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}

				text {
					vertical-align: middle;
				}
			}

			.mid {
				padding: 24rpx 50rpx 40rpx 56rpx;
				border-bottom: 1rpx solid #EFEFEF;

				.name {
					font-size: 32rpx;
				}

				.date {
					margin: 30rpx 0;
					color: #AAAAAA;
				}

				.des {
					color: #AAAAAA;
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					// margin: 24rpx 0 0 24rpx;
					margin: 24rpx;
					width: 148rpx;
					height: 56rpx;
					border: 1rpx solid #EFEFEF;
					border-radius: 28rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.price {
				position: absolute;
				right: 24rpx;
				bottom: 144rpx;
				font-size: 32rpx;
				color: #111;
				font-weight: 600;
			}
		}
	}

	.ml12 {
		height: 56rpx;
		width: 148rpx;
		line-height: 56rpx;
		display: inline-block;
		margin-left: 24rpx;
	}
</style>